<template>
  <div class="order-outer-outer">
    <a-spin :spinning="state.isRefreshing||orderInfo==null" style="width: 100%" size="large">
      <div class="order-outer" v-if="orderInfo!=null">
        <div class="order-status-outer">
          <div class="title-font" style="display: flex;justify-content: space-between;align-items: center">
            Order status
            <basic-button v-if="orderInfo.state<=2" under-line="false" @click="toCancelOrder">
              <span style="font-weight: normal">
                Cancel order
              </span>
            </basic-button>
          </div>
          <div v-if="orderInfo.state<5">

            <div class="order-status show-min-576px">
              <a-steps labelPlacement="vertical" :current="orderInfo.state-1" :initial="0">
                <a-step v-for="item in steps" :key="item.title">
                  <template #title>
                  <span style="font-weight: bold;display: flex;flex-direction: row;align-items: center">
                    {{ item.title }}

                  </span>
                  </template>
                  <template #description>
                    <!--                  <span v-if="item.state==1&&orderInfo.state==1" >-->
                    <!--                      <span style="font-weight: normal;color: #1890ff;cursor: pointer;">-->
                    <!--                        <a @click="toPayOrder">Click to pay</a>-->
                    <!--                      </span>-->
                    <!--                    </span>-->
                    <span v-if="item.state==3&&orderInfo.state==3">
                      <span style="font-weight: normal;color: #1890ff;cursor: pointer;">
                        <a @click="toFinishOrder">Complete order</a>
                      </span>
                    </span>
                  </template>
                </a-step>
              </a-steps>

            </div>
            <div class="order-status show-max-576px show-min-480px">
              <a-steps labelPlacement="vertical" size="small" :current="orderInfo.state-1" :initial="0">
                <a-step v-for="item in steps" :key="item.title">
                  <template #title>
                  <span style="font-weight: bold;display: flex;flex-direction: row;align-items: center">
                    {{ item.title }}
                  </span>
                  </template>
                  <template #description>
                    <!--                  <span v-if="item.state==1&&orderInfo.state==1" >-->
                    <!--                      <span style="font-weight: normal;color: #1890ff;cursor: pointer;">-->
                    <!--                        <a @click="toPayOrder">Click to pay</a>-->
                    <!--                      </span>-->
                    <!--                    </span>-->
                    <span v-if="item.state==3&&orderInfo.state==3">
                      <span style="font-weight: normal;color: #1890ff;cursor: pointer;">
                        <a @click="toFinishOrder">Complete order</a>
                      </span>
                    </span>
                  </template>
                </a-step>
              </a-steps>
            </div>
            <div class="order-status show-max-480px" style="padding: 0 20px">
              <a-steps direction="vertical" size="small" :current="orderInfo.state-1" :initial="0">
                <a-step v-for="item in steps" :key="item.title">
                  <template #title>
                  <span style="font-weight: bold;display: flex;flex-direction: row;align-items: center">
                    {{ item.title }}
                    <!--                    <span v-if="item.state==1&&orderInfo.state==1" >-->
                    <!--                      <span style="font-weight: normal;color: #1890ff;margin-left: 10px;cursor: pointer;">-->
                    <!--                        <a @click="toPayOrder">Click to pay</a>-->
                    <!--                      </span>-->
                    <!--                    </span>-->
                    <span v-if="item.state==3&&orderInfo.state==3">
                      <span style="font-weight: normal;color: #1890ff;margin-left: 10px;cursor: pointer;">
                        <a @click="toFinishOrder">Complete order</a>
                      </span>
                    </span>
                  </span>
                  </template>
                </a-step>
              </a-steps>
            </div>
          </div>
          <a-empty v-else-if="orderInfo.state==5" description="Order cancelled"></a-empty>
          <a-empty v-else description="Reviewing refund"></a-empty>
        </div>


        <a-descriptions bordered size="small" layout="vertical">
          <template #title>
            <div class="title-font">
              Order information
            </div>
          </template>

          <!--          <a-descriptions-item label="Order No">-->
          <!--            {{ (orderInfo.orderNumber != null && orderInfo.orderNumber.trim().length > 0) ? orderInfo.orderNumber.trim() : 'Not filled in' }}-->
          <!--          </a-descriptions-item>-->
          <!--          <a-descriptions-item label="Full name">-->
          <!--            {{ (orderInfo.recipients != null && orderInfo.recipients.trim().length > 0) ? orderInfo.recipients.trim() : 'Not filled in' }}-->
          <!--          </a-descriptions-item>-->
          <!--          <a-descriptions-item label="Phone">-->
          <!--            {{ (orderInfo.phone != null && orderInfo.phone.trim().length > 0) ? orderInfo.phone.trim() : 'Not filled in' }}-->
          <!--          </a-descriptions-item>-->
          <!--          <a-descriptions-item label="Email">-->
          <!--            {{ (orderInfo.email != null && orderInfo.phone.trim().length > 0) ? orderInfo.phone.trim() : 'Not filled in' }}-->
          <!--          </a-descriptions-item>-->

          <a-descriptions-item style="padding: 0">
            <template #label>
              <div style="display: inline-block;padding: 8px 16px 8px 8px;">
                Consignee information
              </div>

            </template>
            <a-descriptions size="small" :column="1" :contentStyle="{'padding':'8px 8px'}"
                            :labelStyle="{'padding':'8px 8px'}">
              <a-descriptions-item label="Order No" style="padding-bottom: 0px;">
                {{
                  (orderInfo.orderNumber != null && orderInfo.orderNumber.trim().length > 0) ? orderInfo.orderNumber.trim() : 'Not filled in'
                }}
              </a-descriptions-item>
              <a-descriptions-item label="Full name" style="padding-bottom: 0px;">
                {{
                  (orderInfo.recipients != null && orderInfo.recipients.trim().length > 0) ? orderInfo.recipients.trim() : 'Not filled in'
                }}
              </a-descriptions-item>
              <a-descriptions-item label="Phone" style="padding-bottom: 0px;">
                {{
                  (orderInfo.phone != null && orderInfo.phone.trim().length > 0) ? orderInfo.phone.trim() : 'Not filled in'
                }}
              </a-descriptions-item>
              <a-descriptions-item label="Email" style="padding-bottom: 0px;">
                {{
                  (orderInfo.email != null && orderInfo.email.trim().length > 0) ? orderInfo.email.trim() : 'Not filled in'
                }}
              </a-descriptions-item>
              <a-descriptions-item label="Create Time" style="padding-bottom: 0px;">
                {{
                  (orderInfo.createAt != null && orderInfo.createAt.trim().length > 0) ? orderInfo.createAt.trim() : 'Not filled in'
                }}
              </a-descriptions-item>
            </a-descriptions>
          </a-descriptions-item>
          <a-descriptions-item label="Receiving Address" :style="{'padding':'8px'}">

            <div v-html="fullAddress" style="height: 100%;">
            </div>
            <!--            {{ (orderInfo.country  != null && orderInfo.country.trim().length > 0) ? orderInfo.country.trim() : '' }}-->
            <!--            {{ (orderInfo.province != null && orderInfo.province.trim().length > 0) ? orderInfo.province.trim() : '' }}-->
            <!--            {{ (orderInfo.city     != null && orderInfo.city.trim().length > 0) ? orderInfo.city.trim() : '' }}-->
            <!--            {{ (orderInfo.address  != null && orderInfo.address.trim().length > 0) ? orderInfo.address.trim() : '' }}-->
            <!--            {{ (orderInfo.others   != null && orderInfo.others.trim().length > 0) ? ( orderInfo.others.trim()) : '' }}-->
            <!--            {{ (orderInfo.newCity  != null && orderInfo.newCity.trim().length > 0) ? orderInfo.newCity.trim() : '' }}-->
          </a-descriptions-item>

          <!--          <a-descriptions-item label="Country">-->
          <!--            {{ (orderInfo.country != null && orderInfo.country.trim().length > 0) ? orderInfo.country.trim() : 'Not filled in' }}-->
          <!--          </a-descriptions-item>-->
          <!--          <a-descriptions-item label="State / Province">-->
          <!--            {{ (orderInfo.province != null && orderInfo.province.trim().length > 0) ? orderInfo.province.trim() : 'Not filled in' }}-->
          <!--          </a-descriptions-item>-->
          <!--          <a-descriptions-item label="ZIP / Postal code">-->
          <!--            {{ (orderInfo.city != null && orderInfo.city.trim().length > 0) ? orderInfo.city.trim() : 'Not filled in' }}-->
          <!--          </a-descriptions-item>-->
          <!--          <a-descriptions-item label="Address" :span="5">-->
          <!--            {{ (orderInfo.address != null && orderInfo.address.trim().length > 0) ? orderInfo.address.trim() : 'Not filled in' }}-->

          <!--            <br v-if="orderInfo.others != null && orderInfo.others.trim().length > 0"/>-->
          <!--            {{ (orderInfo.others != null && orderInfo.others.trim().length > 0) ? ( orderInfo.others.trim()) : '' }}-->
          <!--          </a-descriptions-item>-->

          <!--          <a-descriptions-item label="City">-->
          <!--            {{ (orderInfo.newCity != null && orderInfo.newCity.trim().length > 0) ? orderInfo.newCity.trim() : 'Not filled in' }}-->
          <!--          </a-descriptions-item>-->
          <!--          <a-descriptions-item label="Order time">-->
          <!--            {{ orderInfo.createAt  }}-->
          <!--          </a-descriptions-item>-->

        </a-descriptions>


        <div>
          <div class="title-font">
            Express information
          </div>

          <div class="create-order-list-outer">
            <a-list :bordered="true" :dataSource="orderInfo.delivery!=null?orderInfo.delivery:[]" size="small"
                    :locale="{emptyText:'Not shipped yet'}">
              <template #renderItem="{item,index}">
                <div style="border-bottom: 1px solid #f0f0f0;padding: 10px;">

                  <div
                      style="display: flex;flex-direction: row;flex-wrap: nowrap;align-content: center;justify-content: space-between;align-items: center;">
                    <div>
                      <div style="display: inline;font-size: 18px;margin-right: 20px;">
                          <span style="font-weight: bold">Express service provider：
                          </span>
                        {{ item.deliveryBusiness == null ? 'Unknown service provider' : item.deliveryBusiness }}
                      </div>
                      <div style="display: inline;font-size: 18px;"><span style="font-weight: bold">Courier number：
                          </span>
                        {{ item.deliveryNumber }}
                      </div>
                    </div>
                  </div>
                  <div>
                        <span style="font-weight: bold">Express notes
                          </span>
                    {{ item.deliveryComment == null ? 'None' : item.deliveryComment }}
                  </div>
                </div>

              </template>
            </a-list>


          </div>
        </div>
        <div>
          <div class="title-font">
            Purchase product information
          </div>
          <div class="create-order-list-outer">

            <!--            <a-table :columns="columns" :data-source="orderInfo==null||orderInfo.goods==null?[]:orderInfo.goods" bordered size="small"  :pagination="false">-->
            <!--              <template #footer>-->
            <!--                <div style="display: flex;justify-content: flex-end;">-->

            <!--                  <div style="display: inline-block;">-->

            <!--                    <table>-->
            <!--                      <tbody>-->
            <!--                      <tr>-->
            <!--                        <td style="text-align: right">-->
            <!--                          <div class="basic-font" style="color: black;font-size: 16px">-->
            <!--                            Total goods price：-->
            <!--                          </div>-->
            <!--                        </td>-->
            <!--                        <td style="text-align: left">-->
            <!--                          <div class="basic-font" style="color: black;font-size: 16px">-->
            <!--                            {{ orderInfo.goodsPrice <= 0 ? 'FREE' : ('$' + orderInfo.goodsPrice) }}-->
            <!--                          </div>-->
            <!--                        </td>-->
            <!--                      </tr>-->
            <!--                      <tr>-->
            <!--                        <td style="text-align: right">-->
            <!--                          <div class="basic-font" style="color: black;font-size: 16px">-->
            <!--                            Total Shipping Cost：-->
            <!--                          </div>-->
            <!--                        </td>-->
            <!--                        <td style="text-align: left">-->
            <!--                          <div class="basic-font" style="color: black;font-size: 16px">-->
            <!--                            {{ orderInfo.freightPrice <= 0 ? 'FREE' : ('$' + orderInfo.freightPrice) }}-->
            <!--                          </div>-->
            <!--                        </td>-->
            <!--                      </tr>-->
            <!--                      <tr>-->
            <!--                        <td style="text-align: right">-->
            <!--                          <div class="basic-font" style="color: black;font-size: 16px">-->
            <!--                            Total：-->
            <!--                          </div>-->
            <!--                        </td>-->
            <!--                        <td style="text-align: left">-->
            <!--                          <div class="basic-font" style="color: black;font-size: 16px">-->
            <!--                            {{ orderInfo.totalPrice <= 0 ? 'FREE' : ('$' + orderInfo.totalPrice) }}-->
            <!--                          </div>-->
            <!--                        </td>-->
            <!--                      </tr>-->
            <!--                      </tbody>-->
            <!--                    </table>-->
            <!--                  </div>-->
            <!--                </div>-->
            <!--              </template>-->
            <!--            </a-table >-->

            <a-table :columns="columns" :data-source="orderInfo.goods!=null?orderInfo.goods:[]" bordered size="small"
                     class="show-min-768px"
                     :pagination="false">
              <template #name="{ text,record }">
                <div style="display: flex;flex-direction: row;">
                  <div><img :src="record.good.mainImage" style="width: 70px;height: 70px;border-radius: 10px"></div>
                  <div class="basic-font" style="margin-left: 10px;word-wrap: break-word;white-space: normal">
                    {{ record.good.name }}
                    <div>
                      <div style="color: #646266;font-size: 12px;" v-if="record.good.specification.specification!=null">
                        <div v-for="specification in record.good.specification.specification"
                             style="line-height: 1.1;padding:5px 0;box-sizing: border-box">
                          <div
                              style="background-color: #eeeeee;padding: 3px;border-radius: 5px;font-size: 12px;box-sizing: border-box;word-wrap: break-word;white-space: normal;">
                            {{ specification.key }} : {{ specification.value }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
              <template #footer>
                <div style="display: flex;justify-content: flex-end;">

                  <div style="display: inline-block;">

                    <table>
                      <tbody>
                      <tr>
                        <td style="text-align: right">
                          <div class="basic-font" style="color: black;font-size: 16px">
                            Total goods price：
                          </div>
                        </td>
                        <td style="text-align: left">
                          <div class="basic-font" style="color: black;font-size: 16px">
                            {{ orderInfo.goodsPrice <= 0 ? 'FREE' : ('$' + orderInfo.goodsPrice) }}
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td style="text-align: right">
                          <div class="basic-font" style="color: black;font-size: 16px">
                            Total Shipping Cost：
                          </div>
                        </td>
                        <td style="text-align: left">
                          <div class="basic-font" style="color: black;font-size: 16px">
                            {{ orderInfo.freightPrice <= 0 ? 'FREE' : ('$' + orderInfo.freightPrice) }}
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td style="text-align: right">
                          <div class="basic-font" style="color: black;font-size: 16px">
                            Total：
                          </div>
                        </td>
                        <td style="text-align: left">
                          <div class="basic-font" style="color: black;font-size: 16px">
                            {{ orderInfo.totalPrice <= 0 ? 'FREE' : ('$' + orderInfo.totalPrice) }}
                          </div>
                        </td>
                      </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </template>
            </a-table>

            <a-list :bordered="true" :dataSource="orderInfo.goods!=null?orderInfo.goods:[]" size="small"
                    class="show-max-768px">
              <template #renderItem="{ item }">
                <a-list-item style="justify-content: flex-end;">
                  <div style="display: flex;flex-direction: row;flex:auto">
                    <div>
                      <img :src="item.good.mainImage" style="width: 70px;height: 70px;border-radius: 10px">
                    </div>
                    <div>
                      <div>
                        <div class="basic-font" style="margin-left: 10px;">
                          {{ item.good.name }}
                        </div>
                        <div v-for="specification in item.good.specification.specification"
                             style="line-height: 1.1;padding:5px;box-sizing: border-box">
                          <div style="display:inline-block;background-color: #eeeeee;padding: 3px;border-radius: 5px;font-size: 12px;box-sizing: border-box;">
                            <span style="font-size: 12px;">
                                        {{ specification.key }} :  {{ specification.value }}
                                      </span>
                          </div>

                        </div>
                      </div>
                      <!--                      <div>-->
                      <!--                        <div class="basic-font" style="font-size: 14px;margin-left: 10px;color: #777777" v-if="orderInfo.state>1">-->
                      <!--                          订单编号：-->
                      <!--                          <span  class="basic-font" style="font-size: 14px;color: #777777"  v-if="item.deliveryNumber!=null">-->
                      <!--                            {{item.deliveryBusiness==null||item.deliveryBusiness.trim().length==0?'未知快递商':item.deliveryBusiness.trim()}} | {{item.deliveryNumber}}-->

                      <!--                          </span>-->

                      <!--                          <span  class="basic-font" style="font-size: 14px;color: #777777"  v-else>-->
                      <!--                            {{'尚未发货'}}-->
                      <!--                        </span>-->
                      <!--                          </div>-->
                      <!--                      </div>-->
                    </div>
                  </div>

                  <template #actions>
                    <div class="basic-font" style="color: black;font-size: 16px">
                      {{ item.price == null || item.price <= 0 ? 'FREE' : ('$' + item.price) }} &nbsp;<span
                        style="font-size: 12px;">✖</span>&nbsp;
                      {{ item.number }}
                    </div>
                  </template>
                </a-list-item>
              </template>
              <template #footer>
                <a-list-item>
                  <span></span>
                  <template #actions>
                    <table>
                      <tbody>
                      <tr>
                        <td style="text-align: right">
                          <div class="basic-font" style="color: black;font-size: 16px">
                            Total goods price：
                          </div>
                        </td>
                        <td style="text-align: left">
                          <div class="basic-font" style="color: black;font-size: 16px">
                            {{ orderInfo.goodsPrice <= 0 ? 'FREE' : ('$' + orderInfo.goodsPrice) }}
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td style="text-align: right">
                          <div class="basic-font" style="color: black;font-size: 16px">
                            Total Shipping Cost：
                          </div>
                        </td>
                        <td style="text-align: left">
                          <div class="basic-font" style="color: black;font-size: 16px">
                            {{ orderInfo.freightPrice <= 0 ? 'FREE' : ('$' + orderInfo.freightPrice) }}
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td style="text-align: right">
                          <div class="basic-font" style="color: black;font-size: 16px">
                            Total：
                          </div>
                        </td>
                        <td style="text-align: left">
                          <div class="basic-font" style="color: black;font-size: 16px">
                            {{ orderInfo.totalPrice <= 0 ? 'FREE' : ('$' + orderInfo.totalPrice) }}
                          </div>
                        </td>
                      </tr>
                      </tbody>
                    </table>
                  </template>
                </a-list-item>
              </template>
            </a-list>
          </div>
        </div>
        <div style="margin: 15px 0 0 20px;display: flex;justify-content: end;align-items: center;box-sizing: border-box"
             v-if="orderInfo.state==1">
          <img :src="visa" class="visa-img-style show-min-576px">
          <div style="display: flex;flex-direction: column;align-content: flex-end;align-items: flex-end;">
            <img :src="visa" style="height: 50px" class="visa-img-style show-max-576px">
            <basic-button style="box-sizing: border-box;width: 150px;" :inverse-color="true"
                          @click="toPayOrder">
              <div style="text-align: center">
                Click to pay
              </div>
            </basic-button>
          </div>

        </div>
      </div>
      <a-skeleton v-else :loading="state.isRefreshing||orderInfo==null">
      </a-skeleton>
    </a-spin>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref, reactive, computed, watch, onMounted, onBeforeMount} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
import {cancelOrder, finishOrder, payOrder, searchOrderById} from "../../../api/OrderActionRequest";
import BasicButton from "../../../components/button/basicButton.vue";
import {Modal, notification} from "ant-design-vue";
import {CloseCircleOutlined} from "@ant-design/icons-vue";
import visa from '../../../assets/img/visa.png';

const steps = [
  {
    title: 'To be paid',
    state: 1
  },
  {
    title: 'To be shipped',
    state: 2
  },
  {
    title: 'Shipped',
    state: 3
  },
  {
    title: 'Received goods',
    state: 4
  },
]

const columns = [
  {
    slots: {customRender: 'name'},
    title: 'Name'
  },
  // {
  //   dataIndex:'good.specification.type',
  //   title:'Model Number',
  //   width:'130px'
  // },
  {
    dataIndex: 'number',
    title: 'Quantity',
    width: '85px'
  },
  {
    dataIndex: 'price',
    title: 'Price',
    customRender({text}) {
      return text == null || text == 0 ? 'FREE' : ('$ ' + text)
    },
    width: '60px'
  },
  {
    title: 'Product Total',
    customRender({record}) {
      let num = record.price * record.number
      return num == null || num == 0 ? 'FREE' : ('$ ' + num)
    },
    width: '120px'
  },
]


export default defineComponent({
  components: {BasicButton, CloseCircleOutlined},
  name: 'Order',
  setup(props, context) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();

    const orderInfo = ref(null)

    const state = reactive({
      isRefreshing: false
    })

    const refreshOrderInfo = () => {
      if (state.isRefreshing) return;
      state.isRefreshing = true;
      // @ts-ignored
      searchOrderById(route.params.id).then((res) => {
        if (res.data.result == null) router.push({
          name: '历史订单'
        }); else {
          res.data.result.goods = JSON.parse(res.data.result.goods)
          if (res.data.result != undefined && res.data.result.goods != null) {
            for (let i = 0; i < res.data.result.goods.length; i++) {
              //@ts-ignored
              res.data.result.goods[i].good.specification.specification = JSON.parse(res.data.result.goods[i].good.specification.specification)
            }
          }
          res.data.result.delivery = JSON.parse(res.data.result.delivery)
          orderInfo.value = res.data.result
        }
      }).catch((res) => {
        if (res.data.result == null) router.push({
          name: '历史订单'
        });
      }).finally(() => {
        state.isRefreshing = false;
      })
    }

    onMounted(() => {
      if (route.params == null || route.params.id == null) {
        router.push({
          name: '历史订单'
        })
      } else {
        refreshOrderInfo();
      }
    })

    const toPayOrder = () => {
      if (state.isRefreshing) return;
      state.isRefreshing = true;
      //@ts-ignored
      payOrder(orderInfo.value.id).then((res) => {
        window.location.href = res.data.result;
      }).catch((res) => {
        notification.warning({
          message: res.data.message
        })
      }).finally(() => {
        state.isRefreshing = false;
      })
    }

    const toFinishOrder = () => {
      if (state.isRefreshing) return;
      state.isRefreshing = true;
      //@ts-ignored
      finishOrder(orderInfo.value.id).then((res) => {
        if (typeof res.data.result.goods == "string") res.data.result.goods = JSON.parse(res.data.result.goods)
        if (res.data.result != undefined && res.data.result.goods != null) {
          for (let i = 0; i < res.data.result.goods.length; i++) {
            //@ts-ignored
            res.data.result.goods[i].good.specification.specification = JSON.parse(res.data.result.goods[i].good.specification.specification)
          }
        }
        if (typeof res.data.result.delivery == "string") res.data.result.delivery = JSON.parse(res.data.result.delivery)
        orderInfo.value = res.data.result
      }).finally(() => {
        state.isRefreshing = false;
      })
    }

    const toCancelOrder = () => {
      if (state.isRefreshing) return;
      state.isRefreshing = true;
      Modal.confirm({
        content: 'Confirm cancel order？',
        onOk() {
          //@ts-ignored
          cancelOrder(orderInfo.value.id).then((res) => {

            if (typeof res.data.result.goods == "string") res.data.result.goods = JSON.parse(res.data.result.goods)
            if (res.data.result != undefined && res.data.result.goods != null) {
              for (let i = 0; i < res.data.result.goods.length; i++) {
                //@ts-ignored
                res.data.result.goods[i].good.specification.specification = JSON.parse(res.data.result.goods[i].good.specification.specification)
              }
            }

            if (typeof res.data.result.delivery == "string") res.data.result.delivery = JSON.parse(res.data.result.delivery)

            orderInfo.value = res.data.result
          }).finally(() => {
            state.isRefreshing = false;
          })
        },
        onCancel() {
          state.isRefreshing = false;
        }
      })
    }

    const fullAddress = computed(() => {
      let str = '';
      if (orderInfo.value == null) return null
      let orderInfoTemp = {
        value: JSON.parse(JSON.stringify(orderInfo.value))
      }
      for (let valueKey in orderInfoTemp) {
        if (orderInfoTemp.value[valueKey] == null || (typeof orderInfoTemp.value[valueKey] == 'string' && orderInfoTemp.value[valueKey].trim().length == 0)) {
          delete orderInfoTemp.value[valueKey]
        }
      }

      if (orderInfoTemp.value.recipients != null && orderInfoTemp.value.recipients.trim().length > 0) str += '<br/>' + orderInfoTemp.value.recipients;
      if (orderInfoTemp.value.address != null && orderInfoTemp.value.address.trim().length > 0) str += '<br/>' + orderInfoTemp.value.address;
      if (orderInfoTemp.value.others != null && orderInfoTemp.value.others.trim().length > 0) str += '<br/>' + orderInfoTemp.value.others;


      // if(orderInfoTemp.value.province!=null||orderInfoTemp.value.city    !=null||orderInfoTemp.value.newCity)str+='<br/>'+orderInfoTemp.value.newCity+' '+orderInfoTemp.value.province+' '+orderInfoTemp.value.city ;
      if (orderInfo.value.province != null || orderInfo.value.city != null || orderInfo.value.newCity) {
        let sArr = [orderInfo.value.newCity, orderInfo.value.province, orderInfo.value.city]
        str += '<br/>' + sArr.filter((val) => {
          return val != null && val.trim().length > 0
        }).join(', ')
        // str += '<br/>' + orderInfo.value.newCity + ' ' + orderInfo.value.province + ' ' + orderInfo.value.city;
      }

      if (orderInfoTemp.value.country != null) str += '<br/>' + orderInfoTemp.value.country;
      if (str.startsWith('<br/>')) {
        str = str.slice(5, str.length);
      }
      return str;
    })

    //TODO 订单
    return {
      fullAddress,
      toPayOrder,
      toFinishOrder,
      toCancelOrder,
      refreshOrderInfo,
      orderInfo,
      state,
      steps,
      visa,
      columns
    }
  }
})
</script>

<style scoped lang="less">
.show-max-768px {
  @media screen and(min-width: 769px) {
    display: none !important;
  }
}

.show-min-768px {
  @media screen and(max-width: 768px) {
    display: none !important;
  }
}
.order-outer-outer {
  padding: 10px 70px;

  border-radius: 10px;

  @media screen and (max-width: 1200px) {
    padding: 10px 30px;
  }
  @media screen and (max-width: 768px) {
    padding: 10px 10px;
  }
  @media screen and (max-width: 576px) {
    padding: 5px;
    border-radius: 0;
  }

  .order-outer {
    .order-status-outer {
      .order-status {
        margin: 15px 0 10px 0;

        .ant-steps-item-icon {
          display: flex;
          flex-direction: column;

          .ant-steps-icon {

          }
        }
      }
    }
  }

}


.basic-font {
  display: inline-block;
  font-size: 20px;
  white-space: nowrap;
  line-height: 31.2px;
  @media screen and (max-width: 768px) {
    font-size: 17px;
    line-height: 24.8px;
  }
  @media screen and (max-width: 576px) {
    font-size: 14px;
    line-height: 25.6px;
  }

}

.show-max-576px {
  @media screen and (min-width: 577px) {
    display: none !important;
  }
}

.show-min-576px {
  @media screen and (max-width: 576px) {
    display: none !important;
  }
}

.show-max-480px {
  @media screen and (min-width: 481px) {
    display: none !important;
  }
}

.show-min-480px {
  @media screen and (max-width: 480px) {
    display: none !important;
  }
}


.title-font {
  font-size: 1.6rem;
  font-weight: 700;
  padding: 10px 0;

  @media screen and (max-width: 768px) {
    font-size: 1.4rem;
    font-weight: 600;
    padding: 7px 0;
  }
  @media screen and (max-width: 576px) {
    font-size: 1.3rem;
    font-weight: 600;
    padding: 5px 0;
  }


}

.visa-img-style {
  height: 60px;
}
</style>
<style lang="less">
.order-status {
  .ant-steps-item-icon {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .ant-steps-icon {

    }
  }
}
</style>
